<template>
  <div style="position:absolute;width:100%;height:100%;">
    <el-container style="height: 100%;">
      <el-header background-color="#5eaff0" style="padding: 0px;">
        <div
          style="float: left;width:15%;background: #5eaff0;color:white;font-size:23px;font-weight:800"
        >智能楼宇管理系统</div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#5eaff0"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="width:60%;float: left;"
        >
          <el-menu-item
            :index="x.index"
            v-for="x in topOneMenu"
            style="font-size:19px;width:10%"
          >{{x.name}}</el-menu-item>
        </el-menu>
        <div style="float:right;width:25%;height: 100%;background-color:#5eaff0">
          <iframe
            allowtransparency="true"
            frameborder="0"
            width="317"
            height="28"
            scrolling="no"
            src="//tianqi.eastday.com/plugin/widget_v1.html?sc=3&z=1&t=1&v=0&d=1&bd=0&k=&f=ffffff&q=1&a=1&c=54511&w=317&h=28&align=right"
          ></iframe>
        </div>
      </el-header>
      <el-container>
        <el-menu class="menu-Bar">
          <MenuTree></MenuTree>
        </el-menu>
        <el-container>
          <el-main>
            <router-view v-if="isRouterAlive"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.el-row {
  height: 200px;
}
.menu-Bar:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-header,
.el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.topOther {
  text-align: left;
  height: 25%;
  font-size: 11px;
  line-height: 15px;
  color: white;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
<!--<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>-->
<script type="text/ecmascript-6">
import MenuTree from "../other/NavMenu";
import store from "../../store/index.js";
export default {
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      cityName: "",
      topOneMenu: [
        { name: "设备管理", index: "1" },
        //                  {name:"设备设置",index:"2"},
        { name: "楼层设置", index: "3" },
        { name: "基本设置", index: "4" },
        { name: "网关设置", index: "5" },
        { name: "情景配置", index: "6" },
        { name: "用户管理", index: "7" },
        {name:"数据管理",index:"8"}
        //                  {name:"拖拽控件",index:"7"},
        //                  {name:"前台设置",index:"8"}
      ],
      louData: [],
      cenData: [],
      menuData: [],
      isCollapse: false,
      searchCriteria: "",
      choseData: {},
      breadcrumbItems: ["导航一"],
      isCollapse: false,
      activeIndex2: "3",
      getBuildListData: {
        Pager: "false",
        PageIndex: "",
        PageSize: ""
      },
      getDevData: {
        BuildID: "",
        GateWaysID: "",
        TypesID: "",
        Pager: "",
        PageIndex: "",
        PageSize: ""
      },
      isRouterAlive: true
    };
  },
  components: {
    MenuTree
  },
  methods: {
    handleIconClick(ev) {
      console.log(ev);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      debugger
      switch (key) {
        case "1": //设备管理
          this.$router.push("/devManager");
          break;
        case "3": //楼层设置
          this.$router.push({
            path: "/buildSetting"
          });
          this.getBuildData();
          break;
        case "4": //基础设置
          this.$router.push({
            path: "/basicSetup"
          });
          break;
        case "5": //网关设置
          this.$router.push("/gateWay");
          break;
        case "6": //情景设置
          this.$router.push("/contextualModel");
          break;
        case "7": //拖拽式控件
          this.$router.push("/userManage");
          break;
        case "8": //数据统计
          this.$router.push("/echarts");
          break;
        case "13":
          this.topOneMenu = [];
          this.topOneMenu = [
            { name: "设备管理", index: "1" },
            { name: "设备设置", index: "2" },
            { name: "楼层设置", index: "3" },
            { name: "基本设置", index: "4" },
            { name: "网关设置", index: "5" },
            { name: "情景配置", index: "6" },
            { name: "拖拽控件", index: "7" },
            { name: "前台设置", index: "8" }
          ];
      }
    },
    //获取楼层数据
    getBuildData() {
      let louData = [];
      this.$httpRequest.get(
        "api/Build/GetAllList",
        this.getBuildListData,
        response => {
          if (response.isSuccess) {
            let data = response.data;
            for (let i = 0; i < data.length; i++) {
              louData.push(data[i]);
            }
            for (var i = 0; i < louData.length; i++) {
              data[i].index = i + 1;
            }
            this.menuData = louData;
            // store.dispatch('updateState', {
            //     menuData: this.menuData
            // });
            // console.log('menuData', this.menuData);
            this.$router.push({ path: "/buildSetting" });
          } else {
          }
        }
      );
    },
    reload() {
      this.isRouterAlive = false;
      //在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    }
  },
  mounted() {
    debugger;
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://pv.sohu.com/cityjson?ie=utf-8";
    document.body.appendChild(s);
    setTimeout(() => {
      this.cityName = returnCitySN["cname"];
      //console.log("城市",returnCitySN['cip']+returnCitySN['cname']);
    }, 1000);
  },
  beforeDestory() {
    debugger;
  },
  created() {
    debugger;
    this.getBuildData();
  }
};
</script>